<template>
  <el-container>
    <el-header class="el-header">
      <!-- 发布信息按钮 -->
        <div class="ConsultSearch">
        <el-input v-model="input" placeholder="搜索" class="inner"></el-input>
        <div><el-button type="primary"  @click="searchh">搜索</el-button></div>
      </div>
    </el-header>
    <el-main>
      <!-- 帖子模块 -->
      <div class="Post-directory">
        <el-table
          :data="
            tableData.slice(
              pageSize * (currentPage - 1),
              pageSize * currentPage
            )
          "
          style="width: 100%"
          stripe
        >
          <el-table-column label="评论时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-tme"></i>
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="评论内容" width="450">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.content }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="评论发布人" width="150">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.userName }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="评论资讯" width="150">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.title }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <!-- 编辑删除 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                type="danger"
                @click="deleteList(scope.row.id)"
              >
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 
      :total 总条目数
      :page-count	总页数
      page-size 一页显示几个选择器页数
     -->
        <el-pagination
          background
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="tableData.length"
          :page-count="Math.ceil(tableData.length / pageSize)"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { comments, deleComment } from "@/api/talk";
export default {
  data() {
    return {
      // 搜索框
      tableData: [],
      input: "",
      //帖子发布弹出框
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      //   帖子发布名称
      textarea: "",

      // 分页器的属性
      pageSize: 10,
      // 当前页数
      currentPage: 1,
      /* 页码更改时的事件 */
    };
  },
  created() {
    // 评论获取
    this.comments();
  },
  methods: {
    // 分页功能
    handleCurrentChange(val) {
      // console.log(val);
      this.currentPage = val;
    },
    // 删除功能
    //删除资讯
    deleteList(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            id: id,
          };
          deleComment(obj).then((res) => {
            // console.log(res)
            this.comments();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // 评论获取
    },
    // 评论获取
    comments() {
      let obj = {
        page: 20,
        limit: 20,
      };
      comments(obj).then((res) => {
        // console.log(res);
        let arr = res.data;
        this.tableData = arr;
        // console.log(this.tableData);
      });
    },
    // 评论搜索
    searchh() {
      let obj = {
        search:this.input,
        limit:10,
        page:1
      };
      // console.log(obj)
      comments(obj).then(res=>{
        // console.log(res.data,"searchh")
        this.tableData = res.data
      })
    },
  },
};
</script>

<style scoped>
.el-header {
  /* border: 1px solid red; */
  width: 100%;
  height: 300px;
  box-shadow: 2px 0px 3px black;
  display: flex;
  justify-content: space-between;
}
/* 发布信息按钮 */
.publish {
  margin-top: 6px;
  height: 50px;
  width: 100px;
}
/* 咨询搜索框 */
.inner {
  width: 200px;
  margin: 12px;
  margin-right: 22px;
  border: 1px solid #409eff;
}
.Post-directory {
  height: 100%;
}
.Publish-contents {
  margin: 0 auto;
}
/* 帖子目录 */
.Post-directory-branch {
  display: flex;
}
/* 帖子题目分支 */
.Article-title-branch {
  font-weight: 600;
  margin-left: 200px;
}
/* 作者 */
.author-branch {
  font-weight: 600;
  margin-left: 100px;
}
/* 发布时间 */
.Publish-time-branch {
  font-weight: 600;
  margin-left: 100px;
}
.ConsultSearch {
  display: flex;
  align-items: center;
}
</style>